<template>
  <!-- 大背景 -->
  <div class="base-container">
    <!-- 树状图 -->
    <div style="position: fixed; width: 20%;height: 100%; overflow: scroll; padding-bottom: 100px">
      <t-loading size="small" :loading="dataLoading" showOverlay>
        <div>
          <!-- :actived="actived" -->
          <t-tree line ref="tree" :keys="{value:'id',}" :actived="actived" expand-all
                  :data="TreeReviewTeamData" @active="onTreeActive" activable hover
                  transition>
            <template #label="{ node }">
              {{ node.data.label }}<span v-if="!['1'].includes(node.data.type)" ></span>
            </template>
            <template #operations="{ node }">
              <!-- 添加指标 -->
              <t-button v-if="['1'].includes(node.data.type)" size="small" variant="text" @click="dialog.header = '添加指标';
              dialog.objId = 0;
              dialog.parentId = node.data.id;
              dialog.open_add_edit = true;">
                <t-icon name="add" slot="icon"/>
              </t-button>
              <!-- 编辑指标 -->
              <t-button v-if="node.data.label!=='综合指标'" size="small" variant="text" @click="dialog.header = '编辑指标';
              dialog.objId = node.data.tpye;
              dialog.parentId = 0;
              dialog.open_add_edit = true;">
                <t-icon name="edit-1" slot="icon"/>
              </t-button>
              <t-popconfirm v-if="node.data.label!=='综合指标'" @confirm="removeNode(node)" theme="warning"
                            content="确认删除指标吗">
                <t-button size="small" variant="text">
                  <t-icon name="delete" slot="icon"/>
                </t-button>
              </t-popconfirm>
            </template>
          </t-tree>
        </div>
      </t-loading>
    </div>

    <!-- 添加指标 -->
    <add-edit-metrics @reload="getListReviewTeam()" @changeActived="changeActived" :header="dialog.header"
                    :parentId="dialog.parentId"
                    :objId="dialog.objId" :visible.sync="dialog.open_add_edit" v-if="dialog.open_add_edit">
    </add-edit-metrics>

    <!-- 右边内容 -->
    <div style="margin-left: 24%;height: 100%;">
      <!-- <t-loading size="small" :loading="baseLoading" showOverlay> -->
        <t-card>
          <div>
            <template>
              <div :style="{ width: '200px' }">
                <t-divider>基本信息</t-divider>
              </div>
            </template>
            <t-form labelWidth="150px" :data="formData" ref="form" :colon="true">
              <t-row style="row-gap: 10px">
                <t-col :span="6">
                  <t-form-item label="指标名称" name="name">
                    {{ formData.name }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="分值" name="score">
                    {{ formData.score }}
                  </t-form-item>
                </t-col>
                <t-col :span="12">
                  <t-form-item label="指标说明" name="note">
                    {{ formData.note }}
                  </t-form-item>
                </t-col>
                <t-col :span="12">
                  <t-form-item label="评分依据" name="scoreBasis">
                    {{ formData.scoreBasis }}
                  </t-form-item>
                </t-col>
              </t-row>
            </t-form>
            <t-divider></t-divider>
          </div>    
        </t-card>
      <!-- </t-loading> -->
    </div>
  </div>
</template>
<script>

import addEditMetrics from "./components/add-edit-metics.vue";

export default {
  components:{
    addEditMetrics,
  },
  // dicts:["yxjk_review_item_type"],
  data(){
    return {
      dataLoading: false,
      actived: [],
      TreeReviewTeamData: [],
      dialog: {
        parentId: 0,
        objId: 0,
        teamId: 0,
        projectId: 0,
        open_add_edit: false,
        header: "",
      },
      formData: {
        id: '',
        type: '', //指标类型 
        name: '',// 指标名称
        sort: '', //序号
        score: null,  //分值
        parentId: '',  //上级分组ID
        note: '', //指标说明
        scoreBasis: '', //评分依据
      },
    }
  },
  created() {
    this.dataLoading = true
    this.getListReviewTeam();
  },
  methods:{
    onTreeActive(value, context) {
      this.actived = [context.node.data.id]
      this.$api.yxjk.review.itemGet(context.node.data.id).then((response) => {
        Object.assign(this.formData, response.data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    // 获取树形
    getListReviewTeam() {
      this.$api.yxjk.review.itemTree().then((res) => {
        this.dataLoading = false
        this.TreeReviewTeamData = res.data;
      }).catch((e) => {
        this.dataLoading = false
        this.$message.error(e.toString());
      });
    },
    changeActived(id) {
      this.actived = [id]
      this.$api.yxjk.review.itemGet(id).then((response) => {
        Object.assign(this.formData, response.data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    removeNode(node) {
      this.$api.yxjk.review.itemDel(node.data.id).then(
        (res) => {
          this.getListReviewTeam();
          this.$message.success("删除成功");
        }
      ).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>
